---
title: Checkmark
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

Representerar en lyckad eller slutförd åtgärd.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return <Checkmark />;
};
```

</Tab>

<Tab title="Props">

Utökar `React.ComponentPropsWithoutRef<'div'>` och accepterar alla egenskaper av en vanlig `div`-element.

</Tab>

</Tabs>

## Animerad Bock

Representerar en bockikon med den extra funktionen av animation.

<Tabs>

<Tab title="Usage">

```jsx
import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Egenskaper  | Typ     | Beskrivning                         | Standard     |
| ----------- | ------- | ----------------------------------- | ------------ |
| isAnimating | boolean | Kontrollerar om bocken animerar     | falskt       |
| färg        | string  | Färgen på bocken                    |              |
| varaktighet | nummer  | Animeringens varaktighet i sekunder | 0,5 sekunder |
| storlek     | nummer  | Storleken på bocken                 | 28 pixlar    |

</Tab>

</Tabs>
